<template>
	<div>
		<div class="cover_c">
			<div class="cover">
				<img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt=""
					style="width:100%;height:100%">
			</div>
		</div>
		<div class="content">
			<div class="fixed_box">
				<div class="box_title"><span style="color:red">限选方案</span>已选择</div>
				<div class="selected_number">{{calculate}}</div>
				<div class="middle">/</div>
				<div class="total_number">{{volunteerNum}}</div>
			</div>
			<titles :subtitle="subtitle"></titles>
			<div class="pagetitle">
				<div>“限选”方案</div>
			</div>
			<div class="line"></div>
			<!-- <div class="explain">按住鼠标并拖动可调换志愿顺序</div> -->
			<!-- <div class="prepare">
                &nbsp;&nbsp;您选择的“职业岗位”：<span class="preparedata">&nbsp;{{input.ProfessionalPost}}&nbsp;</span>，“专业方向”：<span class="preparedata">&nbsp;{{input.direction}}&nbsp;</span>，
                        “专业名称”：<span class="preparedata">&nbsp;{{input.name}}&nbsp;</span>，“院校性质”：<span class="preparedata">&nbsp;{{input.nature}}&nbsp;</span>，
                        “地理位置”：<span class="preparedata">&nbsp;{{input.position}}&nbsp;</span>
            </div> -->
			<div class="prepare">
				<h3>如何由“限选”方案生成“优选”方案？</h3>
				<p><span style="font-size: 20px;color: black;">第一步：</span><span
						style="font-size: 20px;color:black;">确立“理想”院校: </span>
					横向对比院校<span style="color:red">区域方位、办学实力、学科优势、专业特色、招生计划、收费标准、特定要求</span>等因素，结合个人未来发展需要，在限选方案的心仪院校中确立<span style="color:red">理想院校</span>；</p>
				<p><span style="font-size: 20px;color: black;">第二步：</span><span
						style="font-size: 20px;color:black;">确立“理想”专业:</span>点击心仪院校右边的“链接”，了解心仪院校中心仪专业历年投档最低分数、最低位次等信息，并在“专业分类”中了解心仪专业概况，确立<span style="color:red">理想专业</span>；
				</p>
				<p><span style="font-size: 20px;color: black;">第三步：</span><span
						style="font-size: 20px;color:black;">形成“优选”方案:</span>填写理想专业代码、名称，形成高考志愿的“优选”方案。</p>
				<p><span style="font-size: 20px;color: red;">注意事项：</span><span
						style="font-size: 20px;color:balck;">1.在每一个志愿组中，建议均<span style="color:red;">至少勾选一个</span>
						院校志愿；2.建议在<span style="color:red;">最后一个</span>志愿组中<span style="color:red;">至少勾选一个志愿</span>，
						以进一步增加被录取的机率。3.所选志愿总数量可超过规定的限额（分母的数量）。</span></p>
			</div>
			<div class="subjecttable" v-for="(item,index) in tabledata" :key="index">
				<div class="subtitle1">
					建议的第{{index+1}}志愿: <span class="status"
						v-bind:style='{color:color[index]}'>({{item[0].voluntaryNature}})</span>
					<span v-if="item[0].isBenchmark"
						style="color:rgba(255, 60, 60, 1);font-family:Noto Sans SC;font-size: 22px;position:relative;left:20px;top:2px">这是您的基准志愿</span>
				</div>
				<subject :tableData='item' :serverselect='serverselect' :status='status' @newData='getData'
					:color='color[index]' :tableIndex='index' @selection='handleSelection' v-if="display"></subject>
			</div>
			<div class="leftside">
				<div class="cndns-right-btn">
					<el-link @click="jumpTo('/informationfilling')" :underline="false">
						<i class="el-icon-s-home"></i>
						<div class="text">首页</div>
					</el-link>
				</div>
				<div class="cndns-right-btn">
					<!-- <el-tooltip class="item" effect="light" content="进入往年当量" hide-after="5000" placement="left-start"> -->
					<el-link @click="jumpTo('/voluntarygroup')" :underline="false">
						<i class="iconfont icon-shangyiye"></i>
						<div class="text">海选方案</div>
					</el-link>
					<!-- </el-tooltip> -->
				</div>
				<div class="cndns-right-btn">
					<!-- <el-tooltip class="item" effect="light" content="进入往年当量" hide-after="5000" placement="left-start"> -->
					<el-link @click="natureaccord()" :underline="false">
						<i class="iconfont icon-xiayiye"></i>
						<div class="text">优选方案</div>
					</el-link>
					<!-- </el-tooltip> -->
				</div>
			</div>
			<!-- <div class="select">
				<el-button class="buttonleft" @click="jumpTo('/voluntarygroup')">返回“海选”方案</el-button>
				<el-button class="buttonright" type="primary" @click="natureaccord()">进入“优选”方案</el-button>
				<!-- <el-button class="left" @click="jumpTo('/voluntarygroup')">返回智能填报</el-button>
                <el-button class="middle" type="primary" @click="verifyVoluntary()">保存我的志愿</el-button>
                <el-button class="right" type="success" @click="download()">导出我的志愿表</el-button> -->
			<!-- </div> --> -->
		</div>
		<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="680px" :show-close="false">
			<div class="message">
				<img src="../assets/error.png" alt="">
				<div style="margin-top:45px" v-if="messageFlag==0">您仅选择了{{calculate}}个志愿<br>您还可以至少选择<span
						v-if="!whichspan">{{tablelength-calculate}}</span><span
						v-if="whichspan">{{volunteerNum-calculate}}</span>个志愿</div>
				<!-- <div style="margin-top:45px" v-if="messageFlag==1">超出可选志愿数量,您只能选择{{volunteerNum}}个志愿</div> -->
				<div style="margin-top:45px" v-if="messageFlag==2">每个“专业填写”栏目中至少填写一个专业信息</div>
				<div style="margin-top:45px" v-if="messageFlag==3">建议在<span style="color:red">最后一个 </span>志愿组中<span
						style="color:red">至少勾选一个志愿</span>，以进一步增加被录取的机率。</div>
			</div>
			<!-- //在最后 {{chooseinsea.length}}个“保一保”中至少选择一个志愿 -->
			<div slot="footer" class="button" v-if="messageFlag==0||messageFlag==3">
				<el-button @click="handleDialogSelection(1)" class="dialogButtonLeft">重新选择</el-button>
				<el-button @click="handleDialogSelection(2)" type="primary" class="dialogButtonRight">仍要继续</el-button>
			</div>
			<div slot="footer" class="button" v-if="messageFlag==2">
				<!-- <el-button @click="dialogVisible=false" type="primary" class="dialogButtonMiddle" v-if="messageFlag==1">确定</el-button> -->
				<el-button @click="handleDialogSelection(1)" type="primary" class="dialogButtonMiddle">确定</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="dialogCover" :close-on-click-modal="false" width="680px" :show-close="false">
			<div class="message">
				<img src="../assets/error.png" alt="">
				<div style="margin-top:45px;width:500px">是否覆盖原来方案中的信息?</div>
			</div>
			<div slot="footer" class="button">
				<el-button @click="cover(1)" class="dialogButtonLeft">取消</el-button>
				<el-button @click="cover(2)" type="primary" class="dialogButtonRight">覆盖</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import titles from '../components/Title'
	import subject from '../components/SubjectTable'
	export default {
		components: {
			titles,
			subject
		},
		data() {
			return {
				subtitle: '我的"平行志愿方案"——专业志愿',
				newData: [],
				tableData: [],
				data: [],
				tabledata: [],
				selectionFinal: [],
				total: {},
				len: [],
				number: 0,
				majorData: [],
				whichspan: 0,
				tablelength: '',
				display: false,
				finalData: [],
				dialogVisible: false,
				dialogCover: false,
				benchmarkFlag: Boolean,
				gradientFlag: Boolean,
				lastVolunteerFlag: Boolean,
				allCorrectFlag: false,
				loadingFlag: false,
				calculate: 0,
				volunteerNum: '',
				selection: [],
				voluntaryNatureArr: [],
				messageFlag: 0,
				usernamearr: [],
				lastGroup: [],
				subject: [],
				color: [
					"#F3930C",
					"#894DFF",
					"#00B23C",
					"#FF5433",
					"#FC25D8",
					"#1A7EFF",
				],
				input: {
					ProfessionalPost: "",
					direction: "",
					name: "",
					nature: "",
					position: "",
				},
				flag: '', //如果为true就代表是修改，如果为false就是第一次勾选值（判断“是否要覆盖消息”）
				chooseinsea: '',
				nextchoosedata: [],
				status: 1,
				serverselect: [],
			}
		},
		methods: {
			// preparedata() {
			// 	let preparafrom = JSON.parse(sessionStorage.preparafrom)
			// 	if (preparafrom != 0) {
			// 		this.input.ProfessionalPost = preparafrom.jobName
			// 		this.input.direction = preparafrom.proDirection
			// 		this.input.name = preparafrom.proName
			// 		this.input.nature = preparafrom.schoolNature
			// 		this.input.position = preparafrom.schoolLocation
			// 	}
			// },
			handleSelection(selection) {
				this.calculate = 0
				let tableIndex = selection.pop() //获得表格序号并移除
				this.selection[tableIndex] = selection //通过序号对不同表格多选内容做区分,防止覆盖
				// console.log(this.selection[tableIndex])
				//实时计算已选择志愿数量
				this.selection.forEach(e => {
					e.forEach(el => {
						this.calculate += 1
					})
				})
				// console.log(this.selection)
			},
			getData(data) {
				this.newData = data;
				// console.log(this.newData);
				// this.volunteerNum = this.newData.length;
			},
			jumpTo(router) {
				sessionStorage.setItem('status', JSON.stringify(1))
				this.$router.push(router)
			},
			getTableData() {
				this.tableData = []
				// let number = 0
				this.tableData = JSON.parse(sessionStorage.tableSelection)
				this.tablelength = this.tableData.length
				// console.log(this.tablelength)
				if (this.tablelength > this.volunteerNum) {
					this.whichspan = 1
				}
				// console.log(this.tableData);
				this.display = true
				this.tableData.forEach(e => {
					if (Object.keys(this.total).indexOf('' + e.volunteerGroup) === -1) {
						this.total[e.volunteerGroup] = []
					}
					this.total[e.volunteerGroup].push(e)
					// if (e.volunteerGroup > number) {
					// 	number = e.volunteerGroup
					// }
				})
				// this.number = number
				// console.log(this.total);
				//创建符合组件SubjectTable.vue浏览的数组
				let username = JSON.parse(sessionStorage.username)
				for (let j = 0; j <= this.number - 1; j++) {
					if (this.total[j + 1] == undefined) {
						this.total[j + 1] = []
						this.total[j + 1][0] = {
							'actualEnrollment': null,
							'collegeCode': null,
							'collegeName': null,
							'controlLine': null,
							'id': null,
							'introduction': null,
							'isBenchmark': null,
							'minCastScore': null,
							'minScoreDifference': null,
							'ordernumber': null,
							'planEnrollment': null,
							'professional': [{
								'professionalName': "",
								'professionalCode': "",
								'professionalNumber': 1
							}],
							'professionalGroup': null,
							'professionalGroupCode': null,
							'provinceId': null,
							'ranking': null,
							'username': username,
							'year': null,
							'voluntaryNature': null,
							'volunteerGroup': j + 1
						}
					}
					this.tabledata.push(this.total[j + 1])
				}
				this.len = this.tabledata.length
				// console.log(this.tabledata)
				// console.log(this.totalData);
				//创建表格颜色数组
				if (this.number > 6) {
					for (let i = 0; i < this.number - 6; i++) {
						this.color.push(this.color[i])
					}
				}
			},
			//转换成接口所需参数数组格式
			changeFinalData() {
				this.finalData = []
				this.newData.map((item, index) => {
					// console.log(item);
					this.finalData.push(
						Object.assign({
							collegeName: item.collegeName,
							collegeCode: String(item.collegeCode),
							professional: item.professional,
							serialNumber: index + 1,
							actualEnrollment: item.actualEnrollment,
							controlLine: item.controlLine,
							isBenchmark: item.isBenchmark,
							introduction: "www.baidu.com",
							minScoreDifference: item.minScoreDifference,
							minCastScore: item.minCastScore,
							planEnrollment: item.planEnrollment,
							ranking: item.ranking,
							username: JSON.parse(sessionStorage.username),
							voluntaryNature: item.voluntaryNature,
							volunteerGroup: item.volunteerGroup,
							professionalGroupCode: item.professionalGroupCode,
							professionalGroup: item.professionalGroup,
						})
					)
					// console.log(this.finalData);
				})
			},
			//对象数组排序函数
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			Enterpreferred() {
				//判断志愿是否比可选志愿少
				if (this.selectionFinal.length < this.volunteerNum) {
					// console.log(this.selectionFinal.length)
					this.messageFlag = 0
					this.dialogVisible = true
					return
				} else {
					this.handleDialogSelection(2)
				}
			},
			//判断每个勾选的志愿是否有填写专业:至少填写一个
			// majoraccord(){
			//     let selection = this.selection
			//     let professionalCode=[]
			//     for(let k=0; k<selection.length; k++){
			//         for(let m=0; m<selection[k].professional.length; m++){
			//             // this.messageFlag=2
			//             // this.dialogVisible=true
			//             // return
			//             professionalCode.push(selection[k].professional[m].professionalCode)
			//         }
			//     }
			//     console.log(professionalCode)
			//     if(professionalCode.includes('')){
			//         console.log('还有东西没填写完')
			//         this.messageFlag=2
			//         this.dialogVisible=true
			//         return
			//     }
			//     else{
			//         this.Enterpreferred()
			//     }
			// }, 
			//第一步先判断是否超出了可选的志愿数
			//第二部再判断志愿性质是否符合：在每一个志愿性质中都至少选择一个
			natureaccord() {
				// if(sessionStorage.getItem('nextchoosedata')){
				// 	sessionStorage.removeItem('nextchoosedata')
				// }
				this.voluntaryNatureArr = []
				this.lastGroup = []
				//判断是否有超出可选志愿数
				// if(selection.length > this.volunteerNum){
				//     this.messageFlag=1
				//     this.dialogVisible=true
				//     return
				// }
				// else{
				// 把数组至空避免选中数量重复
				this.selectionFinal = []
				// 把多张table选中变成数组
				// console.log(this.selection)
				this.selection.forEach(e => {
					e.forEach(el => {
						this.selectionFinal.push(el)
					})
				})
				//存放最后一个志愿组中选择的志愿
				this.selectionFinal.forEach(e => {
					if (e.volunteerGroup === this.number) {
						this.lastGroup.push(e)
					}
				})
				//最后一个志愿组中必须选择一个志愿方可继续
				if (this.lastGroup.length <= 0) {
					this.messageFlag = 3
					this.dialogVisible = true

				} else {
					// console.log(this.selectionFinal)
					let selection = this.selectionFinal
					for (let i = 0; i < selection.length; i++) {
						let voluntaryNature = selection[i].voluntaryNature
						this.voluntaryNatureArr.push(voluntaryNature)
					}
					// console.log(this.voluntaryNatureArr)
					//勾选的内容与上一个页面获取的缓存内容对比，判断最后一批“保一保”是否被选中
					// selection.forEach(item => {
					// 	this.chooseinsea.forEach(row => {
					// 		if (item.collegeName + item.collegecode === row.collegeName + row.collegecode) {
					// 			this.nextchoosedata.push(row)
					// 		}
					// 	})
					// })
					// if(this.voluntaryNatureArr.includes('保一保')){
					if (this.lastGroup.length > 0) {
						this.Enterpreferred()
						// console.log(this.nextchoosedata)
						// sessionStorage.setItem('nextchoosedata', JSON.stringify(this.nextchoosedata))
					} else {
						this.messageFlag = 3
						this.dialogVisible = true
						return
					}
				}

				// if(this.voluntaryNatureArr.includes('冲一冲')){
				//     if(this.voluntaryNatureArr.includes('稳一稳')){
				//         if(this.voluntaryNatureArr.includes('保一保')){
				//             this.Enterpreferred()
				//         }
				//         else{
				//             this.$notify({
				//             title: '提醒',
				//             message: '在“保一保”中至少选择一个志愿',
				//             type: 'warning'
				//             });
				//         }
				//     }
				//     else{
				//         this.$notify({
				//         title: '提醒',
				//         message: '在“稳一稳”中至少选择一个志愿',
				//         type: 'warning'
				//         });
				//     }
				// }
				// else{
				//     this.$notify({
				//     title: '提醒',
				//     message: '在“冲一冲”中至少选择一个志愿',
				//     type: 'warning'
				//     });
				// }
				// }

			},
			// 获取专业信息的数据
			// async getmajorData() {
			// 	var that = this
			// 	const {
			// 		data: res
			// 	} = await this.$axios.post(`
			// 	`)
			// 	res.data.forEach(function(item) {
			// 		item.list.forEach(async function(item1) {
			// 			const {
			// 				data: res
			// 			} = await that.$axios.post(
			// 				)
			// 			item1.list=res.data

			// 		})
			// 	})
			// 	this.majorData =res.data
			// 	console.log(this.majorData)
			// },
			//弹出框选择
			handleDialogSelection(type) {
				//重新选择
				if (type == 1) {
					this.dialogVisible = false
				} else {
					//弹出提示消息，提示“是否覆盖之前的信息”
					// if(this.flag){
					//     this.dialogCover = true
					// }
					// else{
					let provinceId = JSON.parse(sessionStorage.provinceId)
					// let formData = JSON.parse(sessionStorage.form)
					// let Batch=(formData.batch).toString()
					// let Subject=(formData.subject).toString()
					sessionStorage.setItem('limitselect', 1) //判断限选方案是否已经选过的标志
					//先把勾选到的数据存进缓存、先把勾选到的数据保存到后台数据库，跳转到下个页面时再调用接口将数据保存到缓存并渲染到页面上
					this.dialogVisible = false
					//1、将勾选到的数据传到后台数据库
					this.selectionFinal = []
					this.selection.forEach(e => {
						e.forEach(el => {
							this.selectionFinal.push(el)
						})
					})
					console.log(this.selectionFinal)
					this.$axios.post(`${this.baseURL}/chooseVolunteer/insertPselection?provinceId=${provinceId}`, this
							.selectionFinal)
						.then(res => {
							// console.log(res.data)
						})
					//2、存数据进缓存，跳页面
					sessionStorage.setItem('limittable', JSON.stringify(this.selectionFinal))
					this.jumpTo('/Optimalscheme')
					// }

				}
			},
			cover(type) {
				if (type == '1') {
					this.dialogCover = false
					this.dialogVisible = false
				} else {
					let provinceId = JSON.parse(sessionStorage.provinceId)
					sessionStorage.setItem('limitselect', 1) //判断限选方案是否已经选过的标志
					//先把勾选到的数据存进缓存、先把勾选到的数据保存到后台数据库，跳转到下个页面时再调用接口将数据保存到缓存并渲染到页面上
					this.dialogVisible = false
					//1、将勾选到的数据传到后台数据库
					this.selection.forEach(e => {
						e.forEach(el => {
							this.selectionFinal.push(el)
						})
					})
					let selectionFinal = this.selectionFinal
					console.log(this.selectionFinal)
					this.$axios.post(`${this.baseURL}/chooseVolunteer/insertPselection?provinceId=${provinceId}`,
							selectionFinal)
						.then(res => {
							// console.log(res.data)
						})
					//2、存数据进缓存，跳页面
					sessionStorage.setItem('limittable', JSON.stringify(selectionFinal))
					this.jumpTo('/Optimalscheme')
				}
			},
			//登录用户从后端查找已保存的志愿
			searchVoluntary() {
				this.tableData = []
				let formData = JSON.parse(sessionStorage.form)
				let Batch = (formData.batch).toString()
				let Subject = (formData.subject).toString()
				let username = JSON.parse(sessionStorage.username)
				let provinceId = JSON.parse(sessionStorage.provinceId)
				// let form=JSON.parse(sessionStorage.form)
				this.$axios.get(
						`${this.baseURL}/chooseVolunteer/getLselection?username=${username}&provinceId=${provinceId}&batch=${Batch}&score=${formData.score}&subject=${Subject}&referenceYear=${formData.year}`
						)
					.then(res => {
						let getData = res.data.data
						// this.volunteerNum = res.data.data.length
						getData.map((item, index) => {
							this.tableData.push(
								Object.assign(item, {
									ordernumber: index + 1
								})
							)
						})
						// console.log(this.tableData)
						//根据professionalNumber对专业进行排序
						for (let i = 0; i <= this.tableData.length - 1; i++) {
							// console.log(this.tableData[i].professional);
							this.tableData[i].professional.sort(this.compare('professionalNumber'))
							this.dataIndex = i;
							// console.log(this.dataIndex)
						}

						// this.tableData=res.data.data
						sessionStorage.setItem('tableSelection', JSON.stringify(this.tableData))
						this.getTableData()
						this.display = true
					})

			},
			//获取保存的已选志愿
			getpreparedata() {
				let formData = JSON.parse(sessionStorage.form)
				let Batch = (formData.batch).toString()
				let Subject = (formData.subject).toString()
				let provinceId = sessionStorage.provinceId
				let username = JSON.parse(sessionStorage.username)
				this.$axios.get(
						`${this.baseURL}/chooseVolunteer/getPselection?provinceId=${provinceId}&username=${username}&batch=${Batch}&score=${formData.score}&subject=${Subject}&referenceYear=${formData.year}`
						)

					.then((res) => {
						console.log(res.data.data)
						this.serverselect = res.data.data
					})
			}
		},
		created() {
			// this.preparedata() //填报准备页面的数据
			this.getpreparedata() //获取保存的已选志愿
			this.number = JSON.parse(sessionStorage.number)
			console.log(this.number)
			let denominator = JSON.parse(sessionStorage.denominator)
			// this.chooseinsea = JSON.parse(sessionStorage.chooseinsea)
			// alert("chooseinsea")
			this.volunteerNum = denominator
			// this.getmajorData()
			// console.log(this.volunteerNum)
			if (sessionStorage.fromSelect == 1) {
				this.getTableData()
			} else {
				this.flag = true
				this.searchVoluntary()
			}


		}
	}
</script>
<style scoped>
	.content {
		width: 1650px;
		min-height: 1100px;
		background-color: #fff;
		margin: 100px auto;
		margin-bottom: 24px;
		position: relative;
		z-index: 1;
	}

	.explain {
		font-size: 22px;
		font-family: Source Han Sans;
		font-weight: 400;
		line-height: 41px;
		color: rgba(0, 0, 0, 0.45);
		width: 580px;
		/* height: 41px; */
		margin-left: 104px;
		margin-top: 24px;
		text-align: left;

	}

	.content>>>.title {
		height: 10px !important;
	}

	.content>>>.student {
		text-align: center !important;
	}

	.line {
		width: 100%;
		height: 140px;
		font-size: 40px;
		font-family: Noto Sans SC;
		color: #000000;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 50px;
		justify-content: center;
	}

	.more {
		float: right;
		color: rgba(51, 170, 255, 1);
		cursor: pointer;
		/* position:relative;
    top:5px */
	}

	.subtitle1 {
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 500;
		line-height: 48px;
		color: #000000;
		text-align: left;
		margin-bottom: 30px;
	}

	.subjecttable {
		width: 1580px;
		margin: 0 auto;
		margin-top: 30px;
	}

	.cover {
		position: absolute;
		top: -210px;
		z-index: 0;
		/* width: 100%; */
		height: 276px;
		/* text-align: center; */
		left: 50%;
		margin-left: -960px;
		overflow: hidden;
	}

	.cover_c {
		position: relative;
		width: 100%;
		/* z-index: 0; */
	}

	.button {
		width: 550px;
		height: 62px;
		border-radius: 10px;
		margin: 0 auto;
		margin-top: 40px;
		display: flex;
		flex-direction: row;

	}

	.dialogButtonLeft {
		width: 270px;
		height: 50px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 20px;
		font-weight: 300;
		margin-right: 56px;
		border: 1px solid #33AAFF;
		color: rgba(51, 170, 255, 1);
		float: left;

	}

	.dialogButtonRight {
		width: 270px;
		height: 50px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 20px;
		font-weight: 300;
		float: right;
	}

	.dialogButtonMiddle {
		width: 270px;
		height: 50px;
		border-radius: 10px;
		font-family: Noto Sans SC;
		font-size: 20px;
		font-weight: 300;
		margin: 0 auto
	}

	.dialogheader {
		font-family: Noto Sans SC;
		font-size: 26px;
		font-weight: 400;
		color: black;
	}

	.subtitle {
		font-family: Noto Sans SC;
		font-size: 19px;
		font-weight: 400;
		text-align: left;
		color: black;
		padding-left: 50px;
		margin-bottom: 30px;
	}

	.correctClass {
		font-family: Noto Sans SC;
		font-size: 19px;
		font-weight: 400;
		text-align: left;
		color: rgba(51, 170, 255, 1);
		padding-left: 50px;
		margin-top: 10px;
	}

	.errorClass {
		font-family: Noto Sans SC;
		font-size: 19px;
		font-weight: 400;
		text-align: left;
		color: rgba(255, 51, 51, 1);
		padding-left: 50px;
		margin-top: 10px;
	}

	.status {
		font-size: 32px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 54px;
		/* color: #F3930C; */
		position: relative;
		left: 10px;
	}

	.select {
		width: 750px;
		/* margin: 0 auto; */
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		margin: auto;
		/* height: 150px; */
	}

	.select .buttonleft {
		width: 347px;
		height: 62px;
		color: rgba(51, 170, 255, 1);
		float: left;
		font-size: 24px;
		font-family: Source Han Sans;
		font-weight: 100;
		line-height: 41px;
		border: 2px solid #33AAFF;
		border-radius: 10px;
	}

	.select .buttonright {
		width: 347px;
		height: 62px;
		float: right;
		font-size: 24px;
		font-family: Source Han Sans;
		font-weight: 100;
		line-height: 41px;
		border-radius: 10px;
	}

	.pagetitle {
		width: 100%;
		height: 120px;
		font-size: 40px;
		position: absolute;
		font-family: Noto Sans SC;
		margin-bottom: 0%;
		/* line-height: 71px; */
		color: #000000;
		/* margin: 0 auto; */
		font-weight: 700;
		/* margin-top: 80px; */
		letter-spacing: 2px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.fixed_box {
		width: 250px;
		height: 200px;
		position: fixed;
		background-color: rgba(242, 250, 255, 1);
		box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.16);
		border-radius: 16px;
		bottom: 0;
		right: 0px;
		z-index: 2;
	}

	.box_title {
		height: 28px;
		font-size: 28px;
		font-family: Noto Sans SC;
		font-weight: bold;
		line-height: 48px;
		position: absolute;
		top: 16px;
		left: 16px;
	}

	.selected_number {
		width: 80px;
		height: 56px;
		font-size: 55px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 95px;
		color: #FF3333;
		position: absolute;
		top: 55px;
		left: 30px;
		text-align: right;
	}

	.total_number {
		width: 150px;
		height: 72px;
		font-size: 72px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 122px;
		position: absolute;
		left: 100px;
		top: 80px;
	}

	.message {
		display: flex;
		flex-direction: column;
		width: 505px;
		margin: 0 auto;
		margin-top: 15px;
		margin-bottom: 20px;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 41px;
		color: rgba(0, 0, 0, 0.45);
	}

	.middle {
		width: 101px;
		height: 86px;
		position: absolute;
		left: 75px;
		top: 70px;
		font-family: Noto Sans SC;
		font-size: 78px;
		line-height: 95px;

	}

	.prepare {
		color: rgba(0, 0, 0, 0.45);
		font-weight: 400;
		font-size: 0.114583rem;
		margin-top: 0.125rem;
		text-align: left;
		margin-left: 0.541667rem;
		width: 7.910417rem;
		/* text-indent:2em */
	}

	.preparedata {
		color: #39aaff;
		font-size: 25px;
	}

	.leftside {
		position: fixed;
		right: 2%;
		width: 85px;
		min-height: 48px;
		height: 300px;
		top: 40%;
		z-index: 100;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border-radius: 40px;
		/* border: 10px solid black; */
		box-sizing: border-box;
		background: #fff;

	}

	.cndns-right-btn {
		border-radius: 40px;
		width: 100%;
		height: 30%;
		/* text-align: center; */
		display: block;
		margin-top: 10px;

		background-color: #fff;
	}

	i {
		font-size: 28px;
	}

	.text {
		font-size: 20px;
		font-family: Source Han Sans;
		font-weight: bold;
	}
</style>
